import { List } from 'antd';
import { Column, GroupedColumn, Pie, Bar, Donut, Line } from '@ant-design/charts';

/** 基础条形图
 * @param xField 横坐标字段,默认text
 * @param yField 纵坐标字段，默认value
 * @param data 数据，默认[]
 * @param title 标题 -visible , -text 默认 条形图
 * @param description 描述 -同上 默认--
 * @param meta 数据处理 alias 别名，当xy为默认值时设置【类别-数量】
 * @param color 柱子颜色，数组，默认蓝#55A6F3、灰#CED4DE 相间
 * @param colorField 颜色字段，显示可开关的类别标识
 * @param conversionTag 转化率 默认 visible:false
 * @param
 * @param
 */
export const ChartBar = props => {
  let { config = {}, ...rest } = props;
  let axConfig = {
    title: {
      visible: true,
      text: '条形图',
    },
    description: {
      visible: true,
      text: '--',
    },
    data: [],
    xField: 'value',
    yField: 'text',
    forceFit: true,
    padding: 'auto',
    conversionTag: { visible: false },
    colorField: config.xField || 'text',
    color: ['#55A6F3', '#f88c24'],
    label: {
      visible: true,
      position: 'middle',
      adjustColor: true,
    },
  };
  //设置默认
  if (!config.xField) axConfig.meta = { value: { alias: '数量' } };
  //合并配置
  axConfig = Object.assign(axConfig, config);

  return <Bar {...axConfig} />;
};

/** 基础柱状图
 * @param xField 横坐标字段,默认text
 * @param yField 纵坐标字段，默认value
 * @param data 数据，默认[]
 * @param title 标题 -visible , -text 默认 柱状图
 * @param description 描述 -同上 默认--
 * @param meta 数据处理 alias 别名，当xy为默认值时设置【类别-数量】
 * @param color 柱子颜色，数组，默认蓝#55A6F3、灰#CED4DE 相间
 * @param colorField 颜色字段，显示可开关的类别标识
 * @param conversionTag 转化率 默认 visible:false
 * @param
 * @param
 */
export const ChartColumn = props => {
  let { config = {}, ...rest } = props;
  let axConfig = {
    title: {
      visible: true,
      text: '柱状图',
    },
    description: {
      visible: true,
      text: '--',
    },
    data: [],
    xField: 'text',
    yField: 'value',
    forceFit: true,
    padding: 'auto',
    conversionTag: { visible: false },
    colorField: config.xField || 'text',
    color: ['#55A6F3', '#f88c24'],
    label: {
      visible: true,
      position: 'middle',
      adjustColor: true,
    },
  };
  //设置默认
  if (!config.xField && !config.xField)
    axConfig.meta = { text: { alias: '类别' }, value: { alias: '数量' } };
  //合并配置
  axConfig = Object.assign(axConfig, config);

  return <Column {...axConfig} />;
};

/** 分组柱状图
 * @param xField 横坐标字段,默认text
 * @param yField 纵坐标字段，默认value
 * @param groupField 分组字段，默认'groupField'
 * @param data 数据，必填，默认[]
 * @param title 标题 -visible , -text 默认 柱状图
 * @param description 描述 -同上 默认--
 * @param meta 数据处理 alias 别名
 * @param color 柱子颜色，数组，默认['#1ca9e6', '#f88c24', '#1a6179'] 相间
 * @param xAxis
 * @param yAxis
 * @param interactions 缩略图/滚动条，默认缩略图，取消设置为{}
 * @param
 */
export const ChartGroupColumn = props => {
  let { config = {}, ...rest } = props;
  let axConfig = {
    title: {
      visible: true,
      text: '分组柱状图',
    },
    description: {
      visible: true,
      text: '--',
    },
    forceFit: true,
    data: [],
    color: ['#1ca9e6', '#f88c24', '#1a6179'],
    xAxis: {
      visible: true,
      label: {
        visible: true,
        autoHide: false,
        autoRotate: true,
      },
    },
    xField: 'text',
    yField: 'value',
    groupField: 'groupField',
    interactions: [
      {
        type: 'slider',
        cfg: {
          start: 0,
          end: 0.5,
        },
      },
    ],
  };
  //设置默认
  if (!config.xField && !config.xField)
    axConfig.meta = { text: { alias: '类别' }, value: { alias: '数量' } };
  //合并配置
  axConfig = Object.assign(axConfig, config);

  return <GroupedColumn {...axConfig} />;
};

/** 饼状图
 * @param colorField 横坐标字段,默认text
 * @param angleField 纵坐标字段，默认value
 * @param forceFit 自适应宽高(boolean)，自定义时配置width和height(格式为number)
 * @param data 数据，必填，默认[]
 * @param title 标题 -visible , -text 默认 柱状图
 * @param description 描述 -同上 默认--
 * @param meta 数据处理 alias 别名
 * @param
 */
export const ChartPie = props => {
  let { config = {}, ...rest } = props;
  let axConfig = {
    forceFit: true,
    title: {
      visible: true,
      text: '饼图',
    },
    description: {
      visible: true,
      text: '--',
    },
    radius: 0.8,
    data: [],
    angleField: 'value',
    colorField: 'text',
    label: {
      visible: true,
      type: 'outer-center',
    },
    legend: {
      visible: true,
      position: 'bottom',
      flipPage: true,
    },
  };
  //合并配置
  axConfig = Object.assign(axConfig, config);

  return <Pie {...axConfig} />;
};

/** 环图
 * @param colorField 横坐标字段,默认text
 * @param angleField 纵坐标字段，默认value
 * @param forceFit 自适应宽高(boolean)，自定义时配置width和height(格式为number)
 * @param data 数据，必填，默认[]
 * @param title 标题 -visible , -text 默认 柱状图
 * @param description 描述 -同上 默认--
 * @param meta 数据处理 alias 别名
 * @param
 */
export const ChartDonut = props => {
  let { config = {}, ...rest } = props;
  let axConfig = {
    forceFit: true,
    title: {
      visible: true,
      text: '环图',
    },
    description: {
      visible: true,
      text: '--',
    },
    radius: 0.8,
    data: [],
    angleField: 'value',
    colorField: 'text',
    label: {
      visible: true,
      type: 'outer-center',
    },
    legend: {
      visible: true,
      position: 'bottom',
      flipPage: true,
    },
    statistic: {
      visible: true,
    },
  };
  //合并配置
  axConfig = Object.assign(axConfig, config);

  return <Donut {...axConfig} />;
};

// /**折线图
//  * @param xField 横坐标字段,默认text
//  * @param yField 纵坐标字段，默认value
//  * @param data 数据[],必填
//  * @param title 标题
//  * @param Axis 坐标轴
//  * @param forceFit 自适应高度
//  * @param legend 不同字段的标记
//  * @param Tooltip 鼠标提示可选择为 rect|y|x ，默认y
//  * @param groupField 不同字段
//  * @param meta 数据处理 alias 别名
//  * @param Geom 几何标记 point是线上的点，line是线
//  */
// export const ChartLine = props => {
//   let { config = {}, ...rest } = props;
//   let axConfig = {
//     title: {
//       text: '折线图',
//       visible: true,
//     },
//     data: [],
//     forceFit: true,
//     xField: 'year',
//     yField: 'value',
//     groupField: 'groupField',

//     legend: {
//       visible: true,
//       position: 'bottom',
//     },

//     Axis: {
//       visible: true,
//       label: {
//         visible: true,
//       },
//     },
//   };
//   //设置默认
//   if (!config.xField && !config.xField)
//     axConfig.meta = { text: { alias: '年' }, value: { alias: '人数' } };
//   //合并配置
//   axConfig = Object.assign(axConfig, config);

//   return <Line {...axConfig} />
// };
